<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">{{ pageTitle }}</div>

    <el-form :model="buildingForm" :rules="rules" ref="buildingForm" label-width="120px" size="small" style="width:90%">
      <el-form-item label="楼栋编号" prop="buildingCode">
        <el-input v-model="buildingForm.buildingCode" placeholder="楼栋编号"></el-input>
      </el-form-item>
      <el-form-item label="楼栋-单元编号" prop="buildingNo">
        <el-input v-model="buildingForm.buildingNo" placeholder="楼栋-单元编号"></el-input>
      </el-form-item>
      <el-form-item label="楼层数">
        <el-input v-model="buildingForm.floorTotal" placeholder="楼层数"></el-input>
      </el-form-item>
      <el-form-item label="户数">
        <el-input v-model="buildingForm.houseTotal" placeholder="户数"></el-input>
      </el-form-item>
      <el-form-item label="楼栋描述">
        <el-input type="textarea" v-model="buildingForm.note" placeholder="楼栋描述" :rows="2"></el-input>
      </el-form-item>
      <el-row :gutter="15">
        <el-col>
          <el-form-item label="所属小区" prop="deptId">
            <SelectArea class="select__area" :selectModel="buildingForm.deptId" :areaIds="areaIds" @onAreaChange="onAreaChange" hideThird="true"></SelectArea>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="input_gps">
        <el-col>
          <el-col :span="6">
            <el-form-item prop="lng" label="经纬度">
              <el-input v-model="buildingForm.gpsLng"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="item-inline" prop="lat">
              <el-input v-model="buildingForm.gpsLat"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="item-inline-left" :span="2">
            <el-button type="text" icon="el-icon-location" @click="showMap">选择地图位置</el-button>
          </el-col>
        </el-col>
      </el-row>

      <el-form-item style="padding-left:7px;">
        <el-button type="primary" size="small" @click="modifyBuilding()">提 交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog top="0" custom-class="pic-popup" :visible.sync="mapVisible">
      <mapSelect :LngLat="lngLat" :MapClick="mapClick"></mapSelect>
    </el-dialog>
  </div>
</template>

<script>
import SelectArea from '../../components/common/select/area.vue'
import mapSelect from '../../components/common/ui/mapSelect'

export default {
  name: 'addModifyBuilding',
  components: {
    SelectArea,
    mapSelect
  },
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      subTypeArr: [],
      moduleArray: [],
      buildingForm: {
        id: this.$route.params.id,
        buildingCode: '', // 楼栋编号
        buildingNo: '', // 楼栋-单元编号
        deptId: '', // 小区
        gpsLng: '', // 经度
        gpsLat: '', // 纬度
        floorTotal: '', // 楼层数
        houseTotal: '', // 户数
        note: '' // 楼栋描述
      },
      areaIds: {
        areaId1: '',
        areaId2: ''
      },
      lngLat: {}, // 地图标注点的位置
      mapVisible: false,
      mapClick: true, // 地图关闭按钮是否显示
      rules: {
        buildingCode: [
          { required: true, message: '楼栋编号不能为空', trigger: 'blur' }
        ],
        buildingNo: [
          { required: true, message: '单元编号不能为空', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '所属小区不能为空', trigger: ['blur'] }
        ]
      },
      pageTitle: ''
    }
  },
  computed: {
    pointData () {
      return this.$store.state.event.pointData
    },
    pointPopShow () {
      return this.$store.state.event.pointPopShow
    }
  },
  watch: {
    pointData: {
      handler (curVal) {
        this.buildingForm.gpsLng = curVal.lng
        this.buildingForm.gpsLat = curVal.lat
      },
      deep: true
    },
    pointPopShow: {
      handler (curVal) {
        this.mapVisible = curVal
      },
      deep: true
    }
  },
  methods: {
    // 更新楼栋信息
    modifyBuilding () {
      if (this.$route.params.id === 'addBuilding') {
        this.handlerAddBuilding()
      } else {
        let data = {
          id: this.buildingForm.id,
          buildingCode: this.buildingForm.buildingCode,
          buildingNo: this.buildingForm.buildingNo,
          deptId: this.buildingForm.deptId,
          floorTotal: this.buildingForm.floorTotal,
          houseTotal: this.buildingForm.houseTotal,
          note: this.buildingForm.note
        }
        let url = this.$base.getUrl('bizbuildinfoUpdate')

        this.$refs['buildingForm'].validate((valid) => {
          if (valid) {
            this.$store.dispatch('postForm', {
              isJson: true,
              url: url,
              data: data
            }).then(res => {
              if (res.code === 0) {
                this.$message({
                  type: 'success',
                  message: '修改成功！'
                })
                this.$router.push({
                  name: 'houseside'
                })
              } else {
                this.$message.error('修改失败！')
              }
            })
          } else {
            return false
          }
        })
      }
    },
    // 新增楼栋
    handlerAddBuilding () {
      let url = this.$base.getUrl('bizbuildinfoSave')

      this.$refs['buildingForm'].validate((valid) => {
        if (valid) {
          this.$store.dispatch('postForm', {
            isJson: true,
            url: url,
            data: {
              buildingCode: this.buildingForm.buildingCode,
              buildingNo: this.buildingForm.buildingNo,
              deptId: this.buildingForm.deptId,
              gpsLng: this.buildingForm.gpsLng,
              gpsLat: this.buildingForm.gpsLat,
              floorTotal: this.buildingForm.floorTotal,
              houseTotal: this.buildingForm.houseTotal,
              note: this.buildingForm.note
            }
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功！'
              })
              this.$router.push({
                name: 'houseside'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 初始楼栋信息
    getBuilding () {
      let url = this.$base.getUrl('bizbuildinfoInfo')
      this.$store.dispatch('postForm', {
        isJson: true,
        url: url,
        data: {
          id: this.$route.params.id
        }
      }).then(res => {
        let { result } = res
        if (result) {
          this.buildingForm.buildingCode = result.buildingCode
          this.buildingForm.buildingNo = result.buildingNo
          this.buildingForm.deptId = result.deptId
          this.buildingForm.floorTotal = result.floorTotal
          this.buildingForm.houseTotal = result.houseTotal
          this.buildingForm.note = result.note
          this.buildingForm.gpsLng = result.gpsLng
          this.buildingForm.gpsLat = result.gpsLat
          // this.areaIds.areaId2 = result.deptId
        } else {
          this.$message.error('拉取楼栋信息失败')
        }
      })
    },
    showMap () {
      if (!this.buildingForm.deptId) {
        this.$message({
          type: 'warning',
          message: '请选择小区'
        })
        return
      }

      let _this = this
      let url = this.$base.getUrl('getDeptById')
      let params = {
        url: url,
        data: {
          deptId: _this.buildingForm.deptId
        }
      }
      _this.lngLat = {}
      this.$store.dispatch('getForm', params).then(res => {
        this.buildingForm.gpsLng = res.gpsLng
        this.buildingForm.gpsLat = res.gpsLat
        _this.lngLat = {
          lng: res.gpsLng || 121.501472, // 121.501472,31.233027
          lat: res.gpsLat || 31.233027
        }
        _this.mapVisible = true
        _this.$store.commit('setPointPopShow', true)
      })
    },
    // area组件change时
    onAreaChange (val) {
      this.buildingForm.deptId = val
    }
  },
  mounted () {
    this.subTypeArr = this.$base.getConst('select', 'userGender')
    if (this.$route.params.id === 'addBuilding') {
      this.pageTitle = '楼栋新增'
    } else {
      this.getBuilding()
      this.pageTitle = '楼栋编辑'
    }
  }
}
</script>

<style scoped>
.select__area /deep/ .select__street {
  padding: 0 !important;
}
.select__area /deep/ .select__community {
  padding-right: 0 !important;
}
.select__area /deep/ .select__department {
  padding-right: 0 !important;
}
.el-dialog__wrapper >>> .pic-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  margin: 0;
}
.item-inline >>> .el-form-item__content {
  /*margin-left: 0!important;*/
  transform: translate(-80px, 0);
}

.item-inline-left {
  transform: translate(-80px, 0);
}

.app-content-wrap >>> .el-form-item--small .el-form-item__error {
  padding-left: 10px;
}

.input_gps >>> .el-form-item__error,
.input_address >>> .el-form-item__error {
  margin-left: -10px;
}
</style>
